<template>
    <transition name="page-transition-slide-in-right">
        <div class="city-cascader-panel__body-panel" v-show="show">
            <ask-city-panel
                name="ProvincePanel"
                v-bind="$props"
                :list="list"
                :loader="ajaxLoader"
                @item-active="handleItemActive"
                ref="askCityPanelRef"
            ></ask-city-panel>
        </div>
    </transition>
</template>
<script lang="ts">
import {
    Component,
    Mixins
} from "vue-property-decorator";

import cityMixin from "./mixin";

@Component({
    name: "ProvincePanel"
})
export default class ProvincePanel extends Mixins(cityMixin) {
    handleItemActive(item: any) {
        this.$emit("item-active", "province", item);
    }

    async initData(cityCode: any) {
        if (this.list.length !== 0) {
            this.calcPosition();
            const _index = this.list.findIndex((cur: any) => cur.code === this.value);
            return this.list[_index];
        };
        this.cityCode = cityCode;
        this.loader(true);
        try {
            const response = await this.getDataList();
            this.loader(false);
            if (response.length === 0) {
                return false;
            }
            this.list = response.map((cur: any) => {
                this.sourceList.push(cur);
                return {
                        name: cur.name,
                        code: cur.code + ""
                };
            });
            // if (this.showNot) {
            //     this.list.unshift({
            //         code: this.cityCode,
            //         name: "暂不选择",
            //         class: "red"
            //     });
            // }
            const _index = this.list.findIndex((cur: any) => cur.code === this.value);
            // if (_index !== -1) {
            //     this.$refs.askCityPanelRef.setActiveNode(this.list[_index]);
            // }
            return this.list[_index];
        } catch (error) {
            if (error.cancel) {
                return;
            }
            this.loader(false);
            this.$message.error(error.message || "接口请求错误!");
            throw error;
        }
    }
}
</script>
